<template>
  <el-dialog title="结算单详情" v-model="dialogVisible" width="70%" append-to-body destroy-on-close>
    <el-descriptions :column="2" border>
      <el-descriptions-item label="结算单号" :span="2">
        {{ settlement.billNo || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="项目名称">
        {{ settlement.projectName || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="结算周期类型">
        {{ settlement.periodTypeDesc || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="订单编号">
        {{ settlement.orderNo || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="供应商">
        {{ settlement.supplierName || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="开始日期">
        {{ formatDate(settlement.startDate) }}
      </el-descriptions-item>
      <el-descriptions-item label="结束日期">
        {{ formatDate(settlement.endDate) }}
      </el-descriptions-item>
      <el-descriptions-item label="结算金额">
        <span class="amount">{{ formatAmount(settlement.totalAmount) }}</span>
      </el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="getStatusType(settlement.status)">
          {{ settlement.statusDesc || getStatusText(settlement.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="创建时间">
        {{ formatDateTime(settlement.createTime) }}
      </el-descriptions-item>
      <el-descriptions-item label="创建人">
        {{ settlement.createBy || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方审核人">
        {{ settlement.partyBApproveBy || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="乙方审核时间">
        {{ formatDateTime(settlement.partyBApproveTime) || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="甲方审核人">
        {{ settlement.partyAApproveBy || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="甲方审核时间">
        {{ formatDateTime(settlement.partyAApproveTime) || "-" }}
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        {{ settlement.remark || "-" }}
      </el-descriptions-item>
    </el-descriptions>

    <!-- 结算明细表格 -->
    <div class="detail-section">
      <h3>结算明细</h3>
      <el-table :data="settlement.details || []" border style="width: 100%; margin-top: 10px">
        <el-table-column prop="personnelId" label="人员ID" align="center" width="80" />
        <el-table-column prop="personnelName" label="人员姓名" align="center" min-width="120" />
        <el-table-column prop="attendanceDays" label="出勤天数" align="center" min-width="100" />
        <el-table-column prop="overtimeHours" label="加班时长(h)" align="center" min-width="120" />
        <el-table-column prop="monthlyRate" label="月薪(元)" align="center" min-width="120">
          <template #default="scope">
            {{ formatAmount(scope.row.monthlyRate) }}
          </template>
        </el-table-column>
        <el-table-column prop="dailyRate" label="日薪(元)" align="center" min-width="120">
          <template #default="scope">
            {{ formatAmount(scope.row.dailyRate) }}
          </template>
        </el-table-column>
        <el-table-column prop="overtimeRate" label="加班费率(元/h)" align="center" min-width="140">
          <template #default="scope">
            {{ formatAmount(scope.row.overtimeRate) }}
          </template>
        </el-table-column>
        <el-table-column prop="totalAmount" label="金额(元)" align="center" min-width="120">
          <template #default="scope">
            {{ formatAmount(scope.row.totalAmount) }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, defineProps, defineEmits } from "vue";
import { SettlementVO, SettlementStatus } from "@/types/attendance/settlement";

// 定义属性
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  settlement: {
    type: Object as () => SettlementVO,
    default: () => ({}),
    required: true
  }
});

// 定义事件
const emit = defineEmits(["update:modelValue"]);

// 对话框可见性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});

// 状态选项
const statusOptions = [
  { value: SettlementStatus.DRAFT, label: "草稿" },
  { value: SettlementStatus.PARTY_B_PENDING, label: "待乙方审核" },
  { value: SettlementStatus.PARTY_B_APPROVED, label: "乙方已确认" },
  { value: SettlementStatus.PARTY_A_PENDING, label: "待甲方审核" },
  { value: SettlementStatus.COMPLETED, label: "已完成" },
  { value: SettlementStatus.CANCELLED, label: "已取消" }
];

// 获取状态类型
const getStatusType = (status: string | undefined) => {
  if (!status) return "";
  switch (status) {
    case SettlementStatus.DRAFT:
      return "info";
    case SettlementStatus.PARTY_B_PENDING:
    case SettlementStatus.PARTY_A_PENDING:
      return "warning";
    case SettlementStatus.PARTY_B_APPROVED:
      return "success";
    case SettlementStatus.COMPLETED:
      return "success";
    case SettlementStatus.CANCELLED:
      return "danger";
    default:
      return "info";
  }
};

// 获取状态文本
const getStatusText = (status: string | undefined) => {
  if (!status) return "未知状态";
  const option = statusOptions.find(item => item.value === status);
  return option ? option.label : "未知状态";
};

// 格式化金额
const formatAmount = (amount: number | undefined) => {
  if (amount === undefined || amount === null) {
    return "¥0.00";
  }
  return amount.toLocaleString("zh-CN", {
    style: "currency",
    currency: "CNY",
    minimumFractionDigits: 2
  });
};

// 格式化日期
const formatDate = (date: string | undefined) => {
  if (!date) return "-";
  return date.split(" ")[0];
};

// 格式化日期时间
const formatDateTime = (dateTime: string | undefined) => {
  if (!dateTime) return "-";
  return dateTime;
};
</script>

<style lang="scss" scoped>
.detail-section {
  margin-top: 20px;

  h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }
}

.amount {
  color: #f56c6c;
  font-weight: bold;
  font-size: 16px;
}

:deep(.el-descriptions__label) {
  width: 120px;
  font-weight: bold;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
